<template>
  <div id="home">
    <router-view />
    <van-tabbar
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
      route
      v-if="$route.meta.showTab"
    >
      <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="birthday-cake-o" to="/cake"
        >生日蛋糕</van-tabbar-item
      >
      <van-tabbar-item icon="shop-collect-o" to="/foot">食玩所</van-tabbar-item>
      <van-tabbar-item icon="goods-collect-o" to="/shoppingBag" class="item"
        >购物袋
        <van-badge>
          <div class="child" />
          <template #content>
            {{ $store.state.cartNum }}
          </template>
        </van-badge></van-tabbar-item
      >
      <van-tabbar-item icon="manager-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      active: 0,
      show: false,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
    };
  }
};
</script>

<style scoped="scoped">
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100%;
  font-size: 0.12rem;
}
.item {
  position: relative;
}
.van-badge__wrapper {
  position: absolute;
  top: 0.17rem;
  right: 0.58rem;
  display: inline-block;
}
</style>